<template>
<div>

  <div class="title">
    <h1> 课程列表</h1>
    <el-button type="primary" icon="el-icon-plus" class="addCurrm"  @click="dialogFormVisible=true,update=false"></el-button>
  </div>

  <el-dialog title="添加课程" :visible.sync="dialogFormVisible">
    <el-form :model="currmInfo">
      <el-form-item label="课程名称" :label-width="formLabelWidth">
        <el-input v-model="currmInfo.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="教师姓名" :label-width="formLabelWidth">
        <el-input v-model="currmInfo.teacherName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="课时" :label-width="formLabelWidth">
        <el-input v-model="currmInfo.plan" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="学分" :label-width="formLabelWidth">
        <el-input v-model="currmInfo.credit" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="上课时间" :label-width="formLabelWidth">
        <el-input v-model="currmInfo.time" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="上课地点" :label-width="formLabelWidth">
        <el-input v-model="currmInfo.position" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button v-if="update" type="primary" @click="updateCurrm(rowInfo)">确 定</el-button>
      <el-button v-else type="primary" @click="addCurrm">确 定</el-button>
    </div>
  </el-dialog>

<!--  放表格-->
  <el-table :data="curmForm"  border stripe>
    <el-table-column label="课程名称" prop="name" ></el-table-column>
    <el-table-column label="授课老师"prop="teacherName"></el-table-column>
    <el-table-column label="课时" prop="plan"></el-table-column>
    <el-table-column label="学分"prop="credit" ></el-table-column>
    <el-table-column label="上课时间"prop= "time"></el-table-column>
    <el-table-column label="上课地点" prop="position"></el-table-column>
    <el-table-column label="操作">
    <template slot-scope="scope">
      <el-button type="primary" @click="dialogFormVisible=true,update=true,rowInfo=scope.row.id" icon="el-icon-edit" circle></el-button>
      <el-button type="danger" @click="deleteCurrm(scope.row.id)" icon="el-icon-delete" circle></el-button>
      <el-button type="primary" @click="info(scope.row.id)" icon="el-icon-warning-outline" circle></el-button>
    </template>
    </el-table-column>
  </el-table>
</div>
</template>



<script>
import {baseUrl} from "@/api/config";

export default {
  data(){
     return {
       dialogFormVisible:false,
       curmForm: [],
       currmInfo: {
          id:'',
          name: '',
          teacherName: '',
          plan: '',
          credit: '',
          time:'',
          position:''
       },
       formLabelWidth: '180px',
       update:false,
       rowInfo:''
     }
  },
  mounted() {
    this.getCurrms();
  },
  methods:{
    async getCurrms(){
      this.curmForm = await axios.get(`${baseUrl}/currms`)
          .then(function (response){
            console.log(response.data)
            return response.data.data
          })
          .catch(function (error){
            console.log(error)
            return false
          })
      return this.curmForm
    },
    async addCurrm(){
      await this.axios.post(`${baseUrl}/currm`,this.currmInfo).then(
          res =>{
            console.log(res);
          },res =>{
            console.log(res.state);
          })
      this.dialogFormVisible = false
      await this.getCurrms()
    },
    async updateCurrm(id){
      await this.axios.put(`${baseUrl}/currm/${id}`,this.currmInfo).then(
          res =>{
            console.log(res);
          },res =>{
            console.log(res.state);
          })
      this.dialogFormVisible = false
      await this.getCurrms()
    },
    async deleteCurrm(id){
      await this.axios.delete(`${baseUrl}/currm/${id}`).then(
          res =>{
            console.log(res);
          },res =>{
            console.log(res.state);
          })
      this.dialogFormVisible = false
      await this.getCurrms()
    },
    async info(id){
      this.$router.push({path:'/currmInfo',query:{id:id}})
    }
  }

}
</script>

<style lang ="less" scoped>
.title{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>